<template>
  <div class="messages">
    <div class="messages-box">
      <Message v-for="msg of messages" :key="msg.id" :message="msg" />
    </div>
  </div>
</template>

<script setup lang="ts" name="DialogMessage">
import Message from './items/Message.vue'
import type { LDMessage } from '@/llmDialog/types'

const { messages } = defineProps({
  messages: {
    type: Array as () => LDMessage[],
    default: () => [],
  },
})
</script>

<style scoped>
.messages {
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}
.messages-box {
  display: flex;
  flex-direction: column;
  gap: var(--ld-message-gap);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--ld-message-gap) 0 var(--ld-message-gap);
}
</style>
